﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=uPBWN5j3HdwY5wofjzWP2eY58PgXAazl"></script>
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script>

        //1.创建地图实例
        var map = new BMapGL.Map("container");
        //2.设置中心经纬度  这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标）
        var point = new BMapGL.Point(120.872845, 32.021089);
        //3.在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作 值一般是3-19
        map.centerAndZoom(point, 15); // 3:中国  19：街道级别 一般是15

        //加载控件
        map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
        map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
        map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
        map.addControl(new BMapGL.CityListControl());  // 添加城市列表控件 左上角
        map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示

        //Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
        //API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。
        //注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。

        /* var marker = new BMapGL.Marker(point);        // 创建标注
         map.addOverlay(marker);                     // 将标注添加到地图中*/

        //定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以
        //marker.setIcon()方法。
        var myIcon = new BMapGL.Icon("../pages/images/标注.png", new BMapGL.Size(23, 25), {
            // 指定定位位置。
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            anchor: new BMapGL.Size(10, 25),
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
            // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
        });
        //创建标注对象并添加到地图
        var marker = new BMapGL.Marker(point, {
            icon: myIcon,
            enableDragging: true//设置图标可拖拽
        });

        map.addOverlay(marker);
       

        //创建窗体
        var point = new BMapGL.Point(120.872845, 32.021089);
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 100,    // 信息窗口高度
            title: "Hello World"  // 信息窗口标题
        }
        let content = `<table><tr><td>1</td><td>2</td><td>3</td></tr></table>`;
        var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point);        // 打开信息窗口

        //同时监听标注的点击事件
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point);        // 打开信息窗口
        });


    </script>

</body>
</html>
